<template>
  <div class="app-container">
    <el-dialog
      :visible.sync="open"
      :fullscreen="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :show-close="false">
      <div style="
      border-bottom: 1px solid rgb(232,232,232);
      position: absolute;
      top: 0; left: 0;
      height: 70px; width: 100%;
      line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <span style="font-weight: bold; font-size: 20px;">{{ query.key }} —— 版本控制</span>

        <div style="float:right;">
          <el-button type="danger" icon="el-icon-delete" @click="handleMultipartDelete()">批量删除</el-button>
          <el-button plain icon="el-icon-close" @click="handleClose()"></el-button>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        :data="processDefinitionList"
        border
        tooltip-effect="dark"
        style="width: 100%; margin-top: 40px;"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="55"
          align="center"
          sortable>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="模板名称">
        </el-table-column>
        <el-table-column
          prop="versionTag"
          align="center"
          label="版本标签">
        </el-table-column>
        <el-table-column
          prop="version"
          align="center"
          label="版本号"
          width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleMakeProcess(scope.row.deploymentId)">查看</el-button>
            <el-button type="text" size="small" @click="handleDeleteProcess(scope.row.deploymentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page + 1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="float: right; margin-top: 20px;">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>

import {getProcessDefinition, removeProcessDefinitionByDeploymentId} from "@/api/camunda/camunda";

export default {
  name: "index",
  data() {
    return {
      selectVersionList: [],
      processDefinitionList: [],
      query: {
        key: undefined,
        page: 0,
        size: 10
      },
      total: 0,

      open: false,
    }
  },
  methods: {
    init(key){
      this.open = true
      this.query.key = key
      // 初始化流程定义列表
      getProcessDefinition(this.query)
        .then(({data}) => {
          this.total = data.total
          this.processDefinitionList = data.rows
        }).catch(() => {
          this.open = false
      })
    },
    handleCurrentChange(val) {
      this.query.page = val - 1
      this.init(this.query.key)
    },
    handleSizeChange(val) {
      this.query.size = val
      this.init()
    },
    handleSelectionChange(val) {
      this.selectVersionList = val;
    },
    handleMakeProcess(deploymentId) {
      this.$emit('handleMakeProcessByDeployment', this.query.key, deploymentId)
    },
    handleAddNewProcessDefinitionButton(){
      this.resetProcessForm()
      this.title = '新增'
      this.open = true
    },
    handleMultipartDelete(){
      const deploymentIds = []
      this.selectVersionList.forEach((item) => {
        deploymentIds.push(item.deploymentId)
      })
      if(!deploymentIds.length > 0){
        this.$message({type: 'warning', message: '请选择要删除的选项'})
        return;
      }

      this.$confirm('共选中'+ deploymentIds.length +'项，此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProcessDefinitionByDeploymentId(deploymentIds)
          .then(() => {
            this.$message({type: 'success', message: '删除成功!'})
            this.init(this.query.key)
          }).catch()
      }).catch()
    },
    handleClose() {
      this.$emit('init')
      this.open = false
    },
    handleDeleteProcess(deploymentId){
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProcessDefinitionByDeploymentId(deploymentId)
          .then(() => {
            this.$message({type: 'success', message: '删除成功!'})
            this.init(this.query.key)
          }).catch()
      }).catch(() => {})
    },
  },
}
</script>

<style scoped>
.module {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  padding: 0;
}
.download{
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  width: 89px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 10px;
  text-align: center;
}
.download:hover{
  color: #409eff;
  border: 1px solid #409eff;
  cursor: pointer;
}
</style>
